<template>
  <DefineExtraTemplate>
    <p>外部引用：{{ storeContent }}</p>
  </DefineExtraTemplate>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="@/assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <div class="compWrap">
    <HelloWorldTSX
      ref="helloWorldTSXRef"
      msg="Hello World"
      @mounted="handleMounted"
    >
      <template #extra>
        <ReuseExtraTemplate />
      </template>
    </HelloWorldTSX>
    <HelloWorldClass
      ref="helloWorldClassRef"
      msg="Hello World"
      @mounted="handleMounted"
    >
      <template #extra>
        <ReuseExtraTemplate />
      </template>
    </HelloWorldClass>
    <HelloWorldVue
      ref="helloWorldVueRef"
      msg="Hello World"
      @mounted="handleMounted"
    >
      <template #extra>
        <ReuseExtraTemplate />
      </template>
    </HelloWorldVue>
    <HelloWorldH
      ref="helloWorldHRef"
      msg="Hello World"
      @mounted="handleMounted"
    >
      <template #extra>
        <ReuseExtraTemplate />
      </template>
    </HelloWorldH>
  </div>
  <el-button class="clearBtn" type="danger" @click="handleClear">
    重置
  </el-button>
</template>

<script lang="ts">
import { createReusableTemplate } from '@vueuse/core'
import { computed, defineComponent, reactive, toRefs } from 'vue'

import {
  HelloWorldClass,
  HelloWorldClassRef,
  HelloWorldH,
  HelloWorldHRef,
  HelloWorldTSX,
  HelloWorldTSXRef,
  HelloWorldVue,
  HelloWorldVueRef
} from './components'
import { useMainStore } from './store'

const [DefineExtraTemplate, ReuseExtraTemplate] = createReusableTemplate()

export default defineComponent({
  name: 'App',
  components: {
    HelloWorldClass,
    HelloWorldTSX,
    HelloWorldVue,
    HelloWorldH,
    DefineExtraTemplate,
    ReuseExtraTemplate
  },
  setup() {
    const state = reactive({
      helloWorldTSXRef: undefined as Undefined<HelloWorldTSXRef>,
      helloWorldClassRef: undefined as Undefined<HelloWorldClassRef>,
      helloWorldVueRef: undefined as Undefined<HelloWorldVueRef>,
      helloWorldHRef: undefined as Undefined<HelloWorldHRef>
    })

    const mainStore = useMainStore()

    const storeContent = computed(() => mainStore.content)

    function handleMounted(msg: string) {
      console.log(msg)
    }

    function handleClear() {
      state.helloWorldTSXRef?.clear()
      state.helloWorldClassRef?.clear()
      state.helloWorldVueRef?.clear()
      state.helloWorldHRef?.clear()
    }

    return {
      ...toRefs(state),
      storeContent,
      handleMounted,
      handleClear
    }
  }
})
</script>

<style>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}

.compWrap {
  display: flex;
  gap: 20px;
}

.clearBtn {
  margin-top: 20px;
}
</style>
